<script setup lang="ts">
import { formatPrice } from '@/utils/mall'

interface CartItem {
  id: string
  productId: string
  product: {
    id: string
    name: string
    images: string[]
    defaultPrice: number
    stock: number
  }
  sku?: {
    id: string
    price: number
    stock: number
    specs?: Record<string, string>
  }
  quantity: number
  selected: boolean
}

interface Props {
  item: CartItem
  editMode?: boolean
}

interface Emits {
  (e: 'toggleSelect', item: CartItem): void
  (e: 'updateQuantity', item: CartItem, quantity: number): void
  (e: 'remove', item: CartItem): void
  (e: 'click', item: CartItem): void
}

withDefaults(defineProps<Props>(), {
  editMode: false
})

defineEmits<Emits>()

// 获取商品价格
const itemPrice = computed(() => {
  return props.item.sku?.price || props.item.product.defaultPrice
})

// 获取商品库存
const itemStock = computed(() => {
  return props.item.sku?.stock || props.item.product.stock
})
</script>

<template>
  <view class="cart-item">
    <!-- 选择框 -->
    <view class="item-checkbox" @click="$emit('toggleSelect', item)">
      <wd-checkbox :value="item.selected" />
    </view>

    <!-- 商品图片 -->
    <image 
      :src="item.product.images[0]" 
      class="item-image" 
      mode="aspectFit"
      @click="$emit('click', item)"
    />

    <!-- 商品信息 -->
    <view class="item-info" @click="$emit('click', item)">
      <text class="item-name">{{ item.product.name }}</text>
      <text v-if="item.sku?.specs" class="item-specs">
        规格：{{ Object.values(item.sku.specs).join('，') }}
      </text>
      <view class="item-price">
        <text class="current-price">
          {{ formatPrice(itemPrice) }}
        </text>
      </view>
    </view>

    <!-- 数量控制或删除按钮 -->
    <view class="item-controls">
      <view v-if="!editMode" class="quantity-control">
        <wd-input-number
          :value="item.quantity"
          :min="1"
          :max="itemStock"
          size="small"
          @change="(value: number) => $emit('updateQuantity', item, value)"
        />
      </view>
      
      <view v-else class="delete-btn" @click="$emit('remove', item)">
        <wd-icon name="delete" size="20px" color="#ff4142" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.cart-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .item-checkbox {
    margin-right: 10px;
  }

  .item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 10px;
    background: #f8f9fa;
  }

  .item-info {
    flex: 1;
    margin-right: 10px;

    .item-name {
      font-size: 14px;
      color: #333;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .item-specs {
      font-size: 12px;
      color: #999;
      margin-bottom: 8px;
    }

    .item-price {
      .current-price {
        font-size: 16px;
        font-weight: bold;
        color: #ff4142;
      }
    }
  }

  .item-controls {
    .quantity-control {
      :deep(.wd-input-number) {
        width: auto;
      }
    }

    .delete-btn {
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>